<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <sdn-alert class="demo" title="成功提示的文案" type="success"></sdn-alert>
      <sdn-alert class="demo" title="消息提示的文案" type="info"></sdn-alert>
      <sdn-alert class="demo" title="警告提示的文案" type="warning"></sdn-alert>
      <sdn-alert class="demo" title="错误提示的文案" type="error"></sdn-alert>
      <template #annotation></template>
    </CodeCard>
  </div>
</template>

<script>
export default {
  components: {
  },
  setup() {
    const btnDesc = {
      title: "Alert 警告",
      describe: "用于页面中展示重要的提示信息。",
      codeBlock: `<sdn-alert title="成功提示的文案" type="success"></sdn-alert>
      <sdn-alert title="消息提示的文案" type="info"></sdn-alert>
      <sdn-alert title="警告提示的文案" type="warning"></sdn-alert>
      <sdn-alert title="错误提示的文案" type="error"></sdn-alert>`,
      attrs: [
        { "name": "title", "describe": "标题", "type": "string", "emun": "—", "default": "—" }, {
          "name": "type",
          "describe": "主题",
          "type": "string",
          "emun": "success/warning/info/error",
          "default": "info"
        }, {
          "name": "description",
          "describe": "辅助性文字。也可通过默认 slot 传入",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "closable",
          "describe": "是否可关闭",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE"
        }, {
          "name": "center",
          "describe": "文字是否居中",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE"
        }, {
          "name": "close-text",
          "describe": "关闭按钮自定义文本",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "show-icon",
          "describe": "是否显示图标",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, { "name": "effect", "describe": "选择提供的主题", "type": "string", "emun": "light/dark", "default": "light" }],
      slots: [{ "name": "—", "describe": "描述" }, { "name": "title", "describe": "标题的内容" }],
      events: [{ "name": "close", "describe": "关闭alert时触发的事件", "params": "—" }]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style scoped>
.demo {
  margin-top: 0.2rem;
}
</style>
